<template>
	<div class="order-info-page">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		 <div class="order-info-top">
			 <div class="order-state">
				 <div class="main-text">{{info.orderStateName}}</div>
			 </div>
		 </div>
		 <div style="padding:0 32rpx;margin-top:-80rpx;">
			 <div class="order-block" style="margin-top:0">
			 	 <u-cell-group :border="false">
			 		<u-cell>
			 			<view slot="title" class="u-slot-title">公司名称</view>
			 			<text slot="value" class="u-slot-value">{{info.companyName}}</text>
			 		</u-cell>	
			 	 </u-cell-group>
				 <div class="order-info-adr" v-if="info.orderShippingType != '自提'">
					 <div class="adr-info">
						 <div class="adr-top"><span class="name">{{info.receiverName}}</span><span class="phone">{{info.receiverTel}}</span></div>
						 <div class="adr-bottom">
						  <div class="img" style="vertical-align: middle;"><img src="https://pic.moresu.com/FtDhwA1Djg2-Uy7KAoVGAyH7ZjjI" style="width:22rpx;height:28rpx;" mode="aspectFit"/></div>
						  <span style="vertical-align: middle;">{{info.receiverAddress}}</span>
						 </div>
					 </div>
				 </div>
			  </div>
			  
			  
			   <!--商品-->
			  <div class="order-block">
			 	 <div class="goods-info-block" style=" background: #fff;">
			 		 <div class="order-item-top link-bg">
			 			 <div class="store-name">
						   <img src="https://pic.moresu.com/FvShYHPyYqOYuAw8XrzLzHsayNb9" style="width: 38rpx;height:31rpx;display: inline-block;vertical-align: middle;"/>
						   <span style="padding-left:10rpx;vertical-align: middle;">{{info.sellerStore}}</span>
						 </div>
			 		 </div>
			 		 <div class="goods-item">
			 			 <div class="goods-info">
			 				 <div class="goods-name">{{info.inquiryTitle}}</div>
							 <div class="order-row" style="margin-top:20rpx;">
								 <span class="label">交货方式：</span>
								 <span class="text">{{info.orderPayType}}{{info.orderShippingType}}</span>
							 </div>
							 <div class="order-row">
								 <span class="label">预计交货日期：</span>
								 <span class="text">{{info.receiveDate}}</span>
							 </div>
							 <div class="order-row">
								 <span class="label">货物单价：</span>
								 <span class="text">{{info.goodsPrice}}元/吨</span>
							 </div>
							 <div class="order-row">
								 <span class="label">货物数量：</span>
								 <span class="text">{{info.goodsNum}}吨</span>
							 </div>
							 <div class="order-row">
								 <span class="label"  style="white-space:nowrap"> 产品说明：</span>
								 <span class="text">{{info.colorProducerWeightRemarkStr}}</span>
							 </div>

			 			 </div>
			 		 </div>
			 	 </div>
			  </div>
			  <div class="order-price-block">
			 	 <u-cell-group :border="false">
					 <u-cell v-if="info.couponAmount > 0">
					 	<view slot="title" class="order-price-label" >已优惠：</view>
					 	<span slot="value" class="order-price-text" style="color:#000;font-size:28rpx;font-weight: 400;">
					 		￥{{info.couponAmount}}
					 	</span>
					 </u-cell>	
					 
			 		<u-cell :border="false">
			 			<view slot="title" class="order-price-label" >合计总额</view>
			 			<span slot="value" class="order-price-text">
							{{info.orderAmount}}
							<span v-if="info.source == 'goodsId' && info.orderShippingType == '送到'">{{info.orderShippingFee !== '' ? '(含运费'+info.orderShippingFee+'元)' : '(不含运费)'}}</span>
						</span>
			 		</u-cell>			
			 	 </u-cell-group>
			  </div>
			  
			  <div class="order-block" style="margin-top:0">
				   <div class="order-title">订单信息</div>
				   <div class="goods-info" style="padding:0 32rpx 32rpx 32rpx">
					   <div class="order-row">
							 <span class="label">订单编号：</span>
							 <span class="text">{{info.orderSn}}</span>
					   </div>
					   <div class="order-row">
							 <span class="label">下单人：</span>
							 <span class="text">{{info.buyerPhone}}<span style="padding-left:20rpx">{{info.buyerName}}</span></span>
					   </div>
					   <div class="order-row" v-if="info.createTime">
						 <span class="label">下单时间：</span>
						 <span class="text">{{info.createTime}}</span>
					   </div>
					   <div class="order-row" v-if="info.sellerUploadContractTime">
							 <span class="label">卖家签约时间：</span>
							 <span class="text">{{info.sellerUploadContractTime}}</span>
					   </div>
					   <div class="order-row" v-if="info.buyerUploadContactTime">
							 <span class="label">买家签约时间：</span>
							 <span class="text">{{info.buyerUploadContactTime}}</span>
					   </div>
					   <div class="order-row" v-if="info.orderPayTime">
						 <span class="label">付款时间：</span>
						 <span class="text">{{info.orderPayTime}}</span>
					   </div>
					   <div class="order-row" v-if="info.orderSendTime">
						 <span class="label">发货时间：</span>
						 <span class="text">{{info.orderSendTime}}</span>
					   </div>
					   <div class="order-row" v-if="info.invoiceTime">
							 <span class="label">开票时间：</span>
							 <span class="text">{{info.invoiceTime}}</span>
					   </div>
					   <div class="order-row" v-if="info.orderReceiveTime">
						 <span class="label">完成时间：</span>
						 <span class="text">{{info.orderReceiveTime}}</span>
					   </div>
					   <div class="order-row" v-if="info.contractUrl != '' && info.orderState >= 20 ">
							 <span class="label">合同附件：</span>
							 <span class="text" @click="preview(info.contractUrl)">查看</span>
					   </div>
					   <div class="order-row">
						 <span class="label" style="white-space:nowrap">订单备注：</span>
						 <span class="text">{{info.orderRemark}}</span>
					   </div>
				   </div>
				   
				  
				
				 <div style="overflow: hidden;border-top:1px solid #eee;">
				 	<div class="u-flex">
				 		<u-button @click="callPhone(info.sellerStorePhone)" icon="phone" text="联系商家" type="primary" :plain="true" :custom-style="{'border':'0','borderRight':'1px solid #eee','borderRadius':'0'}"></u-button>
						
						<!-- #ifdef MP -->
						<u-button icon="kefu-ermai" text="客服介入" type="primary" :plain="true" :custom-style="{'border':'0'}" openType="contact"></u-button>
						<!--#endif -->
						<!-- #ifdef H5 | APP-PLUS -->
						 <u-button icon="kefu-ermai" text="客服介入" type="primary" :plain="true" :custom-style="{'border':'0'}" @click="callPhone(contactMobile)"></u-button>
						<!--#endif -->
						
				 	</div>
				 </div>
			  </div>
			  
			  <div class="order-block" v-if="info.orderState > 20">
				  <u-cell-group :border="false">
						<u-cell isLink  @click="toOrderUrl('/pagesUser/order/payInfo')" v-if="info.orderState > 20">
							<view slot="title" class="u-slot-title">支付信息</view>
							<text slot="value" class="u-slot-value"></text>
						</u-cell>
						<u-cell isLink  @click="toOrderUrl('/pagesUser/order/sendInfo')" v-if="info.orderState > 30">
							<view slot="title" class="u-slot-title">发货信息</view>
							<text slot="value" class="u-slot-value"></text>
						</u-cell>
						<u-cell isLink  @click="toOrderUrl('/pagesUser/order/logisticsInfo')" v-if="info.isDeliver  == 1 ">
							<view slot="title" class="u-slot-title">物流信息</view>
							<text slot="value" class="u-slot-value"></text>
						</u-cell>
						<u-cell isLink  @click="toOrderUrl('/pagesUser/order/invoiceInfo')" v-if="info.orderState > 50">
							<view slot="title" class="u-slot-title">开票信息</view>
							<text slot="value" class="u-slot-value"></text>
						</u-cell>
				  </u-cell-group>
			  </div>
			
			 <div class="order-block">
			 	<div class="order-title">操作记录</div>
			 	<div style="padding:10px 15px">
			 		<u-read-more :showHeight="100" :toggle="true" closeText="展开" :shadowStyle="shadowStyle" ref="uReadMore">
			 			<u-steps  direction="column" dot>
			 					<u-steps-item :title="item.log_time" v-for="item in info.orderLog" :key="item.olp_id">
			 						<div slot="desc" style="font-size:14px">
			 						{{item.log_msg}}
			 						<span style="padding-left:5px;cursor: pointer;color:#FF5E01" v-if="item.file.length > 0" @click="preview(item.file)">查看</span>
			 						</div>
			 					</u-steps-item>
			 				</u-steps>
			 		</u-read-more>
			 	</div>
			 </div>
			 
		 </div>
		
				
		<view class="page-bottom-btn" :style="{paddingLeft:'20rpx',paddingRight:'20rpx'}"
		v-if="( info.orderState == 5 || info.orderState == 20 || info.orderState == 40 ||  info.orderState == 50 || info.orderState == 60) && info.isMyBuy == 1">
			<!-- <u-button text="取消订单" shape="circle"  v-if="(info.orderState == 0 || info.orderState == 5) && info.isMyBuy == 1" @click="showCancel(info)"></u-button> -->
			<u-button text="确认签约" type="primary" shape="circle"  v-if="info.orderState == 5 && info.isMyBuy == 1" @click="showDown(info)"></u-button>
			<u-button text="上传汇款信息" type="primary" shape="circle"  v-if=" info.orderState == 20 && info.isMyBuy == 1" @click="showPay(info)"></u-button>
			<u-button text="确认收货" type="primary" shape="circle"  v-if=" info.orderState == 40 && info.isMyBuy == 1" @click="show=true"></u-button>
			<u-button text="服务评价"  shape="circle" type="primary" :custom-style="style" v-if=" info.orderState >= 40  && info.isEvaluate == 0 "  @click="toEvaluateInfo(info,'add')"></u-button>
			<u-button text="查看评价"  shape="circle" type="primary" :custom-style="style" v-if=" info.orderState >= 40  && info.isEvaluate == 1 "  @click="toEvaluateInfo(info,'see')"></u-button>
		</view>
		
		<cancelOrder ref="cancelOrder" @refresh="getInfo"></cancelOrder>
		<payOrder ref="payOrder" @refresh="getInfo"></payOrder>
		<downloadImg ref="downloadImg" @refresh="getInfo"></downloadImg>
		
		 <u-modal :show="show" title="提示" content='确认收货后，订单完成!' showCancelButton @confirm="takeConfirm" @cancel="show=false"></u-modal>
	 
	</div>
</template>

<script>
	import cancelOrder from '@/components/module/cancelOrder';
	import payOrder from '@/components/module/payOrder';
	import downloadImg from '@/components/module/downloadImg';
	import {getOrderDetail,editOrder,pageSeo,commonData} from '@/config/api.js'
	import base from '@/config/baseUrl.js';
	export default {
	    components:{
	       cancelOrder,payOrder,downloadImg
	    },
	    data() {
	        return {
				
				orderId:'',
				info:{},
				show:false,
				shadowStyle:{
					 // #ifndef APP-NVUE
					    backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
					    // #endif
					    // #ifdef APP-NVUE
					    // nvue上不支持设置复杂的backgroundImage属性
					    backgroundImage: "linear-gradient(to top, #fff, rgba(255, 255, 255, 0.5))",
					    // #endif
					    paddingTop: "100px",
					    marginTop: "-100px",
						zIndex:1
				},
			    systemInfo: base.systemInfo,
				contactMobile:''
	        }
	    },
	    async onLoad(e) {
			await this.$onLaunched;
			this.orderId = e.orderId
	       
			commonData().then((res)=>{
				this.contactMobile = res.contactMobile
			})
	    },
		async onShow() {
		 await this.$onLaunched;
		 this.getInfo();
		// #ifdef H5
			pageSeo({pageType: 'indexPage'}).then((res)=>{
				document.title = res.pageTitle;
			})
		// #endif	
		},
	    methods: {
			toEvaluateInfo(item,type){
				console.log(item)
				uni.navigateTo({
				    url:'/pagesUser/order/evaluateInfo?orderId='+item.orderId+'&type='+type
				})
			},
			toOrderUrl(url){
				uni.navigateTo({
				    url:url+'?orderId='+this.orderId
				})
			},
			
			preview(url){
				let linkUrl = [];
				linkUrl = Array.isArray(url) ? url : [url]
				uni.previewImage({urls: linkUrl});
			},
			takeConfirm(){
				let data = {};
				data.orderId = this.orderId;
				data.operationType = 'buyerTake';
				editOrder(data).then(()=>{
					this.show = false;
					this.getInfo();
					uni.showToast({
					  title: '确认收货完成！',
					  icon: 'none',
					  duration: 2000,
					});
				})
			},
			showDown(item){
				this.$refs.downloadImg.init(item)
			},
			showCancel(item){
				this.$refs.cancelOrder.init(item)
			},
			showPay(item){
				this.$refs.payOrder.init(item)
			},
			callPhone(num){
				uni.makePhoneCall({
					phoneNumber: num+''
				})
			},
			//获取详情
			getInfo(){
				getOrderDetail({orderId:this.orderId}).then((res)=>{
					this.info = res;
					this.$refs.uReadMore.init();
				})
			},
			
	           
	        
	    }
	
	}
</script>

<style lang="scss">
	@import '@/style/common.scss';
	.order-info-page{
	  min-height: 100vh;
	  padding-top:0;
	  background: $background-color;
	  padding-bottom:66px;
	  .order-info-top{
	    height:238rpx;
	    background:url('https://pic.moresu.com/FoUj7Mx48tOoLJ2b2nVvrDQN8KsX');
		background-size: cover;
		padding-top:68rpx;
	    color:#fff;
	    .order-state{
	      width:60%;
	      padding-left:20px;
	      .main-text{
	        font-size:$b-font;
			font-weight: bold;
	      }
	      .sub-text{
	        margin-top:10px;
	        font-size:$s-font;
	      }
	    }
	    .order-img{
	      width:40%;
	      padding-right:20px;
	      text-align: right;
	      image{
	        width:100px
	      }
	    }
	  }
	  .order-info-adr{
	    padding:24rpx 32rpx;
	    background: #fff;
	    .adr-info{
	      font-size:$m-font;
	      color:$font-color;
	      width:calc(100% - 30px);
		  background: #fff;
	      .adr-top{
	        line-height: 22px;
			margin-bottom:10rpx;
	        .name{
	          font-weight: bold;
	          padding-right:10px
	        }
	      }
		  .img{
			display: inline-block;
		    width:36rpx;
		    image{
		      width:100%;
		    }
		  }
	    }
	  }
	  .order-block{
	    margin-top:36rpx;
		background: #fff;
		box-shadow: 0px 0px 10rpx rgba(42,11,0,0.09);
		border-radius: 18rpx;
		overflow: hidden;
		.u-slot-title{
			font-size:$m-font
		}
		.u-slot-value{
			font-size:$m-font
		}
		.order-title{
			font-size:$m-font;
			padding:10px 15px;
			padding-left:28px;
			position: relative;
		}
		.order-title::after{
			content: " ";
			width: 9rpx;
			height: 20rpx;
			background: linear-gradient(180deg, #FF5E01 0%, #FF5E01 100%);
			border-radius: 5rpx;
			position: absolute;
			left:15px;
			top:15px;
		}
		.order-row{
			line-height: 48rpx;
			font-size:24rpx;
			@include flexbox(space-between,flex-start);
			.label{
				color:#929292
			}
			.text{
				color: #000;
			}
		}
	
	  };
	  .order-price-block{
		  .order-price-label{
			  font-size:$m-font;
		  }
		  .order-price-text{
			  font-size:$m-font;
			  color:#ff0000;
			  font-weight:bold
		  }
	  }
	  .order-item-top{
	
	    padding:10px 16px;
	    font-size:$m-font;
		@include flexbox(space-between,center);
	    position: relative;
	    .store-name{
	      color:$font-color;
	      @include textoverflow(1);
	      padding-right:10px;
	    }
	    .order-state{
	      color:$theme-color;
	      white-space: nowrap;
	    }
	  }
	  .order-item-top:after{
	    @include borderBottom(); 
	  }
	  .goods-item{
	    @include flexbox(flex-start,center);
	    padding:32rpx;
	    .goods-info{
		   width:100%;
	      .goods-name{
	        font-size:$m-font;
	        color:$font-color;
			font-weight: bold;
	      }
	      .goods-attr{
	        margin-top:5px;
	        font-size:$s-font;
	        color:$g-font-color
	      }
	      .goods-price-num{
	        margin-top:5px;
			@include flexbox(space-between,center);
	        .price{
	          font-size:$m-font;
	          color:$theme-color
	        }
	        .num{
	          font-size:$s-font;
	          color:$g-font-color;
			  float:right;
	        }
	      }
	    }
	  }
	  .orderRemark{
	    @include flexbox(flex-start,flex-start);
	    background: #fff;
	    padding:10px 16px;
	    font-size:$m-font;
	    color:$font-color;
	    .label{
	      width:80px;
	
	    }
	    .text{
	      width:calc(100% - 80px)
	    }
	  }
	  .order-info-block{
	    background: #fff;
	    padding:16px;
	    .info-title{
	      border-left:2px solid $theme-color;
	      font-size:$m-font;
	      color:$font-color;
	      line-height: 16px;
	      padding-left:10px;
	      margin-bottom:10px;
	    }
	    .info-con{
	      .info-row{
		   @include flexbox(flex-start,flex-start);
	        padding-left:10px;
	        font-size:$m-font;
	        line-height:26px;
	        .label{
	          color:$g-font-color;
	          width:80px;
	        }
	        .text{
	          width:calc(100% - 80px);
	          color:$font-color
	        }
	      }
	    }
	  }
	  .page-bottom-btn{
	    position: fixed;
	    height:50px;
	    background: #fff;
	    width:100%;
	    bottom:0;
	    padding:0 10px;
		z-index: 5;
		@include flexbox(flex-start,center);
	    .bottom-left{
	      width:40%;
	      font-size:$m-font;
	      span{
	        color:$theme-color
	      }
	    }
	    .bottom-right{
	      width:60%;
	      text-align: right;
	    }
	  }
	  .releaseBaoJia{
	    .title{
	      font-size:$b-font;
	      color:$font-color;
	      text-align: center;
	      height:50px;
	      line-height: 50px;
	      position: relative;
	    }
	    .title:after{
			@include borderBottom()
	    }
	    .van-cell:first-child input.van-field__control{
	      text-align: right;
	    }
	  }
	}
	
</style>